import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, Tabs, Picker ,DatePicker,Flex} from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './patyofintegral.less'


const seasons = [
  [
    {
      label: '二级单位',
      value: '二级单位',
    },
    {
      label: '三级党支部',
      value: '三级党支部',
    },
  ],
];

const seasons1 = [
  [
    {
      label: '领导干部',
      value: '领导干部',
    },
    {
      label: '中层管理',
      value: '中层管理',
    },
  ],
];
class partyofintegral extends React.Component{
  constructor(props){
    super(props);
    this.state={

    }
  }
//table点击函数
  handleTabClick = (key) => {
    switch (key) {
      case '1': //组织
        this.props.dispatch({
          type: 'PartyOfintegra/audit',//model namespace
          payload: {}
        });
        break;
      case '2': //个人
        this.props.dispatch({
          type: 'PartyOfintegra/readyPass',
          payload: {}
        });
        break;
    }
  }

  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  }

  render(){
    const { getFieldProps } = this.props.form;

    return(
      <div className="partyofintegral">
        <WhiteSpace size="lg"/>
        <Tabs
          defaultActiveKey="1"
          animated={true}
          swipeable={false}
          onTabClick={this.handleTabClick}>
          <Tabs.TabPane tab="组织" key="1">
            <WhiteSpace size="lg"/>
           <div style={{width:'100%',height:'1rem',marginTop:'0.55rem',backgroundColor:'#EEEEEE',paddingTop:'0.5rem'}}>
             <div className={styles.selects}>
               <div className={styles.types}>按组织</div>
             <List className={styles.selectsxia}>
             <Picker
               data={seasons}
               cascade={false}
               value={this.state.sValue}
               onChange={v => this.setState({ sValue: v })}
               onOk={v => this.setState({ sValue: v })}
             >
               <Icon type={require('../../../svgs/work/xia.svg')} style={{backgroundColor:'#EEEEEE',verticalAlign:'middle'}}/>
             </Picker>
             </List>
             </div>
             <div  className={styles.selects}>
               <div className={styles.types}>日期选择:</div>
               <List className={styles.selectsxia}>
                 <DatePicker
                   mode="date"
                   title="选择开始时间"

                   {...getFieldProps('begin_time', {
                     rules: [
                       { required: true, message: '选择开始时间'},
                       { validator: this.validateDatePicker },
                     ]
                   })}>
                  <Icon type={require('../../../svgs/work/xia.svg')} style={{backgroundColor:'#EEEEEE',verticalAlign:'middle'}}/>
                 </DatePicker>
               </List>
             </div>
           </div>
          <div>
            <Flex>
              <Flex.Item>排名</Flex.Item>
              <Flex.Item>姓名</Flex.Item>
              <Flex.Item>积分</Flex.Item>
            </Flex>
          </div>
            <div>
              <Flex>
                <Flex.Item><Icon type={require('../../../svgs/work/one.svg')}/></Flex.Item>
                <Flex.Item style={{color:'#ff2c37'}}>赵某某</Flex.Item>
                <Flex.Item style={{color:'#ff2c37'}}>1200积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><Icon type={require('../../../svgs/work/two.svg')}/></Flex.Item>
                <Flex.Item style={{color:'#ff7900'}}>钱某某</Flex.Item>
                <Flex.Item style={{color:'#ff7900'}}>1100积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><Icon type={require('../../../svgs/work/three.svg')}/></Flex.Item>
                <Flex.Item style={{color:'#ffaa00'}}>孙某某</Flex.Item>
                <Flex.Item style={{color:'#ffaa00'}}>1000积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><b>4</b></Flex.Item>
                <Flex.Item>李某某</Flex.Item>
                <Flex.Item>900积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><b>5</b></Flex.Item>
                <Flex.Item>周某某</Flex.Item>
                <Flex.Item>800积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><b>6</b></Flex.Item>
                <Flex.Item>吴某某</Flex.Item>
                <Flex.Item>700积分</Flex.Item>
              </Flex>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="个人" key="2">
            <WhiteSpace size="lg"/>
            <div style={{width:'100%',height:'1rem',marginTop:'0.55rem',backgroundColor:'#EEEEEE',paddingTop:'0.5rem'}}>
              <div className={styles.selects}>
                <div className={styles.types}>按组织</div>
                <List className={styles.selectsxia}>
                  <Picker
                    data={seasons1}
                    cascade={false}
                    value={this.state.sValue}
                    onChange={v => this.setState({ sValue: v })}
                    onOk={v => this.setState({ sValue: v })}
                  >
                    <Icon type={require('../../../svgs/work/xia.svg')} style={{backgroundColor:'#EEEEEE',verticalAlign:'middle'}}/>
                  </Picker>
                </List>
              </div>
              <div  className={styles.selects}>
                <div className={styles.types}>日期选择:</div>
                <List className={styles.selectsxia}>
                  <DatePicker
                    mode="date"
                    title="选择开始时间"

                    {...getFieldProps('begin_time', {
                      rules: [
                        { required: true, message: '选择开始时间'},
                        { validator: this.validateDatePicker },
                      ]
                    })}>
                    <Icon type={require('../../../svgs/work/xia.svg')} style={{backgroundColor:'#EEEEEE',verticalAlign:'middle'}}/>
                  </DatePicker>
                </List>
              </div>
            </div>
            <div>
              <Flex>
                <Flex.Item>排名</Flex.Item>
                <Flex.Item>姓名</Flex.Item>
                <Flex.Item>积分</Flex.Item>
              </Flex>
            </div>
            <div>
              <Flex>
                <Flex.Item><Icon type={require('../../../svgs/work/one.svg')}/></Flex.Item>
                <Flex.Item style={{color:'#ff2c37'}}>赵某某</Flex.Item>
                <Flex.Item style={{color:'#ff2c37'}}>1200积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><Icon type={require('../../../svgs/work/two.svg')}/></Flex.Item>
                <Flex.Item style={{color:'#ff7900'}}>钱某某</Flex.Item>
                <Flex.Item style={{color:'#ff7900'}}>1100积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><Icon type={require('../../../svgs/work/three.svg')}/></Flex.Item>
                <Flex.Item style={{color:'#ffaa00'}}>孙某某</Flex.Item>
                <Flex.Item style={{color:'#ffaa00'}}>1000积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><b>4</b></Flex.Item>
                <Flex.Item>李某某</Flex.Item>
                <Flex.Item>900积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><b>5</b></Flex.Item>
                <Flex.Item>周某某</Flex.Item>
                <Flex.Item>800积分</Flex.Item>
              </Flex>
              <Flex>
                <Flex.Item><b>6</b></Flex.Item>
                <Flex.Item>吴某某</Flex.Item>
                <Flex.Item>700积分</Flex.Item>
              </Flex>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }
}


function mapStateToProps({PartyOfintegra}) {
  return {PartyOfintegra}
}
const partyofintegralxx = createForm()(partyofintegral);

export default connect(mapStateToProps)(partyofintegralxx);
